<template>	
	<div class="showBox">	
		<TopNav/>
		<div class="commentpart">
			<div v-for="(every,index) in count" class="outer">
				<Comment :info='commentInfo':index='index' :routeName='routename'/>
			</div>
		</div>
		<BottomNav />
	</div>
</template>

<script>
	import TopNav from './topNav'
	import Comment from './comment'
	import BottomNav from "../../public/bottomNav"
	export default{
		data(){
			return{
				commentInfo:[],
				count:null,
				routename:''
			}
		},
		components:{
			TopNav,
			Comment,
			BottomNav
		},
		created(){
			this.$axios.get('http://localhost:3000/commentList')
			.then(res => {
				//console.log(res.data);
				this.commentInfo=res.data;
				this.count=this.commentInfo.length;
				this.routename=this.$route.name;
				//console.log(this.routename);			
			})
			.catch(error =>{
				console.log(error)
			})
			
		}
	}
</script>

<style scoped lang="less">
@current:100rem;
.showBox{
	.commentpart{
		margin-top: 88/@current;
		.outer:last-child{
			padding-bottom: 95/@current;
		}
	}
}
</style>
